<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.HolyGrail,
.HolyGrail-body {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.HolyGrail-nav {
  order: -1;
  border: 1px solid red;
}

@media (min-width: 768px) {
  .HolyGrail-body {
    flex-direction: row;
    flex: 1;
    border: 1px solid red;
  }
  .HolyGrail-content {
    flex: 1;
    border: 1px solid red;    
  }
  .HolyGrail-nav, .HolyGrail-ads {
     /*12em is the width of the columns */
    flex: 0 0 12em;
    border: 1px solid red;
  }
}

</style>

</head>

<body class="HolyGrail">
  <header>…</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">…</main>
    <nav class="HolyGrail-nav">…</nav>
    <aside class="HolyGrail-ads">…</aside>
  </div>
  <footer>…</footer>
</body>

</html>